<template>
  <nav class="nav" :class="navFixed?'navFixed':''" id="navBar">
    <div class="container">
      <router-link to="/" class="logo"><img src="/static/img/logo.png" alt=""> 亚伦教育</router-link>
      <ul class="nav_list">
        <li v-for="(item,index) in nav"
            @click="routerLink(index, item.path)"
            :class="navIndex == index ? 'nav_item active' : 'nav_item'"
            :key="index">
          <a>{{item.title}}</a>
        </li>
      </ul>
    </div>
  </nav>
</template>
<script>
  export default {
    name: 'Header',
    props: {
      imgs: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        nav: [
          {title: '首页', path: '/'},
          {title: '平台介绍', path: '/intro'},
          {title: '热门专业', path: '/hot'},
          {title: '关于我们', path: '/about'}
        ],
        navIndex: 0,
        navFixed: false,
        isDone: false,
        swiperOptions: {
          pagination: '.swiper-pagination',
          paginationType: 'fraction',
          observeParents: true,
          observer: true
        }
      }
    },
    methods: {
      routerLink (index, path) {
        // 点击哪个路由就赋值给自定义的下标
        this.navIndex = index
        // 记录
        sessionStorage.setItem('navIndex', index)
        // 路由跳转
        this.$router.push(path)
      },
      checkRouterLocal (path) {
        // 查找当前路由下标高亮
        this.navIndex = this.nav.findIndex(item => item.path === path)
        // 记录
        sessionStorage.setItem('navIndex', this.navIndex)
      },
      handleScroll () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        scrollTop > 100 ? this.navFixed = true : this.navFixed = false
      }
    },
    created () {
      sessionStorage.getItem('navIndex') == null ? this.navIndex = 0 : this.navIndex = sessionStorage.getItem('navIndex')
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
    watch: {
      $route () {
        // 获取当前路径
        let path = this.$route.path
        // 检索当前路径
        this.checkRouterLocal(path)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  @import '~styles/varibles.styl'
  .logo {
    float left
    color #fff;
    font-size: 22px
    img {
      height :auto;
      vertical-align middle
      width :56px;
      margin-top -5px;
    }
  }

  .nav {
    background: $mainColor
    height 80px;
    line-height 80px;
    position relative;
    transition all .3s;
    box-shadow: 0 3px 5px rgba(0, 198, 149, .4)
    .container {
      overflow hidden
    }
  }

  .nav.navFixed {
    position fixed
    top: 0;
    left: 0
    right 0;
    z-index 100000
  }

  .nav_list {
    float right
    overflow hidden
    .nav_item {
      float left
      cursor default
      a {
        text-align center
        display inline-block;
        height: 100%;
        padding 0 12px;
        vertical-align middle
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        margin-left: 36px;
        position relative
        &:after {
          content: '';
          position absolute;
          height 2px;
          background-color #fff;
          width 0;
          left 50%;
          bottom 20px;
          transform: translate(-50%, 0);
          transition: all .3s;
          border-radius 1px;
        }
      }
      &:hover a:after {
        width 100%;
      }
      &.active a:after {
        width 100%;
      }
    }
  }
</style>
